import React,{Component} from 'react'
import { TabBar } from 'antd-mobile';
import PropTypes from 'prop-types';
import {withRouter} from 'react-router-dom'
class NavFooter extends Component{
    static propTypes = {
        navList:PropTypes.array.isRequired
    }
    
    render(){
        let {navList} = this.props
        return (
            <div style={{ position: 'fixed', width: '100%', bottom: 0 }}>
                <TabBar
                unselectedTintColor="#949494"
                tintColor="red"
                barTintColor="white"
                noRenderContent={true}
                tabBarPosition="bottom"
                prerenderingSiblingsNumber={0}
                >
                {
                    navList.map(nav=>
                        (<TabBar.Item
                            title={nav.title}
                            key={nav.path}
                            icon={{uri: require(`../../assets/images/nav_footer/${nav.icon}.svg`)}}
                            selectedIcon={{uri: require(`../../assets/images/nav_footer/${nav.icon}_selected.svg`)}}
                            selected={this.props.location.pathname===nav.path}
                            onPress={() => {
                                this.props.history.replace(nav.path)
                            }}
                        >
                        </TabBar.Item>)
                    )
                }
                </TabBar>
            </div>
        )
    }
}

export default withRouter(NavFooter)